import React from 'react';

import { SvgIcon } from '@/components/icon';
import useWindowWidth from '@/hooks/event/use-window-width';
import usePermission from '@/hooks/event/usePermission';
import { useRouter } from '@/router/hooks';

interface MenuProp {
  key: string;
  label: React.ReactNode;
  icon: JSX.Element;
  divider?: boolean;
  onClick: () => void;
  child?: MenuProp[];
}

export const useMenuItems = (
  isEnableRoleConditions: boolean,
  isDatasetPermit: boolean,
  id: string,
) => {
  const router = useRouter();
  const { isPc } = useWindowWidth();
  const { isAdmin } = usePermission();

  const [activeMenu, setActiveMenu] = React.useState('');

  const roleMenus: MenuProp[] = [
    {
      key: '/role/manage',
      label: <div style={{ color: '#434a5f', fontWeight: '700' }}>角色管理</div>,
      icon: (
        <SvgIcon
          icon="icon-park-solid--people"
          size={30}
          style={{
            padding: '6px',
            color: '#33ADFF',
          }}
        />
      ),
      onClick: () => {
        router.push(`/role/manage`);
      },
    },
  ];

  const itemList: MenuProp[] = [
    {
      key: '/datasets/list',
      label: <div style={{ color: '#434a5f', fontWeight: '700' }}>知识库</div>,
      icon: (
        <SvgIcon
          icon="ri--book-2-fill"
          size={30}
          style={{
            padding: '3px',
            color: '#ce33e6',
          }}
        />
      ),
      onClick: () => {
        router.push(`/datasets/list`);
      },
    },
    {
      key: '/datasets/api',
      label: <div style={{ color: '#434a5f', fontWeight: '700' }}>数据接口管理</div>,
      icon: (
        <SvgIcon
          icon="icon-park-solid--api"
          size={30}
          style={{
            padding: '4px',
            color: '#3783eb',
          }}
        />
      ),
      onClick: () => {
        router.push(`/datasets/api`);
      },
    },
    {
      key: '/apps/permission',
      label: <div style={{ color: '#434a5f', fontWeight: '700' }}>权限管理</div>,
      icon: (
        <SvgIcon
          icon="fluent-mdl2--permissions-solid"
          size={30}
          style={{
            padding: '6px',
            color: '#29bdb8',
          }}
        />
      ),
      onClick: () => {
        router.push(`/apps/permission`);
      },
    },
    ...(isEnableRoleConditions && isAdmin ? roleMenus : []),
    {
      key: '/apps/report',
      label: <div style={{ color: '#434a5f', fontWeight: '700' }}>应用看板</div>,
      icon: (
        <SvgIcon
          icon="icon-park-solid--slide"
          size={30}
          style={{
            padding: '3px',
            color: '#a76cff',
          }}
        />
      ),
      onClick: () => {
        router.push(`/apps/report/${id}`);
      },
    },
    {
      key: '/apps/manage',
      label: <div style={{ color: '#434a5f', fontWeight: '700', width: '80px' }}>个性化配置</div>,
      icon: (
        <SvgIcon
          icon="ri--apps-2-add-fill"
          size={30}
          style={{
            padding: '3px',
            color: '#eb897c',
          }}
        />
      ),
      onClick: () => {
        router.push(`/apps/manage/${id}`);
      },
    },
    {
      key: '/extension/manage',
      label: <div style={{ color: '#434a5f', fontWeight: '700' }}>应用管理</div>,
      icon: (
        <SvgIcon
          icon="ri--apps-3-fill"
          size={30}
          style={{
            padding: '3px',
            color: '#db9040',
          }}
        />
      ),
      onClick: () => {
        router.push(`/extension/manage`);
      },
    },
  ];

  const itemList2: MenuProp[] = [
    ...(isDatasetPermit
      ? [
        {
          key: '/apps/permission',
          label: <div style={{ color: '#434a5f', fontWeight: '700' }}>权限管理</div>,
          icon: (
            <SvgIcon
              icon="fluent-mdl2--permissions-solid"
              size={30}
              style={{
                padding: '6px',
                color: '#29bdb8',
              }}
            />
          ),
          onClick: () => {
            router.push(`/apps/permission`);
          },
        },
        ...(isEnableRoleConditions && isAdmin ? roleMenus : []),
        {
          key: '/datasets/list',
          label: <div style={{ color: '#434a5f', fontWeight: '700' }}>知识库</div>,
          icon: (
            <SvgIcon
              icon="ri--book-2-fill"
              size={30}
              style={{
                padding: '3px',
                color: '#ce33e6',
              }}
            />
          ),
          onClick: () => {
            router.push(`/datasets/list`);
          },
        },
      ]
      : []),
  ];

  const dividerMenus: MenuProp[] = [
    ...(isDatasetPermit
      ? [
        ...(isPc
          ? [
            {
              type: 'divider' as const, //下划线
            },
          ]
          : []),
      ]
      : []),
  ];
  return { itemList, itemList2, dividerMenus };
};
